<template>
  <div class="main">
    <section>
      <div class="flex-container">
        <div class="module-container">
          <div class="title">图片模块：</div>
          <div class="content">
            <div class="module-template module-carousel" @click="addModule(1)">
              <div class="content">• • •</div>
              <div class="text">轮播海报</div>
            </div>
            <div class="module-template module-pic-fix" @click="addModule(2)">
              <div class="content">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
              </div>
              <div class="text">平铺固定</div>
            </div>
            <div class="module-template module-pic-scroll" @click="addModule(3)">
              <div class="content">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
              </div>
              <div class="text">平铺滑动</div>
            </div>
          </div>
          <div class="title">商品模块：</div>
          <div class="content">
            <div class="module-template module-goods-list-detail" @click="addModule(4)">
              <div class="content">
                <div class="img"></div>
                <div class="detail">
                  <div class="name">商品名称名称</div>
                  <div class="price">￥120</div>
                </div>
              </div>
              <div class="text">详细列表</div>
            </div>
            <div class="module-template module-goods-list-pic" @click="addModule(5)">
              <div class="content">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
              </div>
              <div class="text">平铺模式</div>
            </div>
            <div class="module-template module-goods-list-pic-scroll" @click="addModule(6)">
              <div class="content">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
              </div>
              <div class="text">滑动模式</div>
            </div>
          </div>
          <div class="title">其它模块：</div>
          <div class="content">
            <div class="module-template module-footer-bar"  @click="addModule(-1)">
              <div class="content">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
              </div>
              <div class="text">锚点导航</div>
            </div>
            <div class="module-template module-footer-bar" @click="addFooterBar">
              <div class="content">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
              </div>
              <div class="text">底部导航</div>
            </div>
            <div class="module-template module-rich-text" @click="addModule(7)">
              <div class="content">
                <img src="../../../assets/common/rich-text-header.png" />
              </div>
              <div class="text">富文本</div>
            </div>
          </div>
        </div>
        <div class="page-container">
          <div class="phone">
            <el-form ref="headerForm" :model="formData" size="small" label-width="110px">
              <div @click="moduleClick(-1)">
                <h5-header :formData="formData"></h5-header>
              </div>
            </el-form>
            <section
              id="scroll-container"
              ref="scroll-container"
              :style="`background: ${formData.tempData.background||'#000'} url(${formData.tempData.background_image}) no-repeat;`"
            >
              <draggable
                v-model="formData.tempData.modules"
                :options="{group:'modules'}"
                @start="drag=true"
                @end="drag=false; currentModule=-1; updateAnchorPoint();">
                <div
                  v-for="(module, index) in formData.tempData.modules"
                  :class="'module'+(currentModule===index?' active':'')"
                  @click="moduleClick(index)"
                  :key="index"
                  :style="`background: url(${module.module_background_image}) no-repeat;`">
                  <el-form
                    :ref="`moduleForm${index}`"
                    :model="module"
                    size="small"
                    label-width="80px">
                    <div class="module-type" v-if="showTypeText || (showAnchorPoint && module.is_anchor_point)">
                      {{showTypeText?typeText[module.module_type]:''}}{{showAnchorPoint && module.is_anchor_point ? `【锚点：${module.anchor_point_name}】`:''}}
                    </div>
                    <div class="remove-btn" @click="removeModule(index)">
                      <i class="el-icon-delete"></i>
                    </div>
                    <!-- <div v-if="module.is_anchor_point" class="anchor-point">锚点：{{module.anchor_point_name}}</div> -->
                    <h5-anchor-point
                      v-if="module.module_type===-1"
                      :moduleIndex="index"
                      :data="module"
                      :remove="removeModule"
                    ></h5-anchor-point>
                    <h5-carousel
                      v-if="module.module_type===1"
                      :moduleIndex="index"
                      :data="module"
                      :remove="removeModule"
                      :updateAnchorPoint="updateAnchorPoint"
                    ></h5-carousel>
                    <h5-pic-fix
                      v-else-if="module.module_type===2"
                      :moduleIndex="index"
                      :data="module"
                      :remove="removeModule"
                      :updateAnchorPoint="updateAnchorPoint"
                    ></h5-pic-fix>
                    <h5-pic-scroll
                      v-else-if="module.module_type===3"
                      :moduleIndex="index"
                      :data="module"
                      :remove="removeModule"
                      :updateAnchorPoint="updateAnchorPoint"
                    ></h5-pic-scroll>
                    <h5-goods-detail
                      v-else-if="module.module_type===4"
                      :moduleIndex="index"
                      :data="module"
                      :remove="removeModule"
                      :updateAnchorPoint="updateAnchorPoint"
                      :promotionId="promotionId"
                    ></h5-goods-detail>
                    <h5-goods-cover
                      v-else-if="module.module_type===5"
                      :moduleIndex="index"
                      :data="module"
                      :remove="removeModule"
                      :updateAnchorPoint="updateAnchorPoint"
                      :promotionId="promotionId"
                    ></h5-goods-cover>
                    <h5-goods-scroll
                      v-else-if="module.module_type===6"
                      :moduleIndex="index"
                      :data="module"
                      :remove="removeModule"
                      :updateAnchorPoint="updateAnchorPoint"
                      :promotionId="promotionId"
                    ></h5-goods-scroll>
                    <h5-rich-text
                      v-else-if="module.module_type===7"
                      :ref="`richText${index}`"
                      :moduleIndex="index"
                      :data="module"
                      :remove="removeModule"
                      :updateAnchorPoint="updateAnchorPoint"
                    ></h5-rich-text>
                  </el-form>
                </div>
              </draggable>
            </section>
            <div
              class="module fix-module"
              v-if="formData.tempData.footer_tabs.content_list && formData.tempData.footer_tabs.content_list.length"
              @click="moduleClick('footer')"
            >
              <div class="module-type" v-if="showTypeText">底部导航</div>
              <el-form
                ref="`moduleFormFooter`"
                :model="formData.tempData.footer_tabs"
                size="small"
                label-width="60px"
              >
                <div class="remove-btn" @click="removeFooterBar">
                  <i class="el-icon-delete"></i>
                </div>
                <h5-footer-tabs :data="formData.tempData.footer_tabs" :remove="removeFooterBar"></h5-footer-tabs>
              </el-form>
            </div>
          </div>
          <div class="phone-footer">上下拖动模块可以进行排序</div>
          <div class="phone-footer"><el-checkbox v-model="showTypeText">显示模块类型</el-checkbox></div>
          <div class="phone-footer"><el-checkbox v-model="showAnchorPoint">显示已设置锚点</el-checkbox></div>
        </div>
      </div>
      <div class="h5-btn-container">
        <el-button type="primary" size="medium" :loading="btnLoading" @click.stop="save">保存</el-button>
        <el-button type="info" size="medium" plain @click="cancle">取消</el-button>
      </div>
    </section>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import { getUuid } from "../../../utils/index";
import H5Header from "./component/H5Header";
import H5Carousel from "./component/H5Carousel";
import H5PicFix from "./component/H5PicFix";
import H5PicScroll from "./component/H5PicScroll";
import H5GoodsDetail from "./component/H5GoodsDetail";
import H5GoodsCover from "./component/H5GoodsCover";
import H5GoodsScroll from "./component/H5GoodsScroll";
import H5AnchorPoint from "./component/H5AnchorPoint";
import H5FooterTabs from "./component/H5FooterTabs";
import H5RichText from "./component/H5RichText";
export default {
  name: "h5Detail",
  props:['activeName'],
  components: {
    draggable,
    H5Header,
    H5Carousel,
    H5PicFix,
    H5PicScroll,
    H5GoodsDetail,
    H5GoodsCover,
    H5GoodsScroll,
    H5AnchorPoint,
    H5FooterTabs,
    H5RichText
  },
  data() {
    return {
      typeText: {
        '-1': '锚点导航',
        '1': '轮播海报',
        '2': '平铺图片',
        '3': '滑动图片',
        '4': '详细商品列表',
        '5': '平铺商品列表',
        '6': '滑动商品列表',
        '7': '富文本'
      },
      showTypeText: true,
      showAnchorPoint: true,
      currentModule: -1,
      formData: {
        timeRange: [],
        type: 1,
        jumpType: 1,
        banner: "",
        remarks: "",

        name: "页面标题",
        startTime: "",
        stopTime: "",
        status: 1,
        description: "",
        comment: "",

        tempData: {
          isHide: false,
          background: "#f1f1f1",
          background_image: "",
          share_icon: "",
          description: "",
          modules: [],
          footer_tabs: { content_list: [] }
        }
      },
      btnLoading: false,
      promotionId:''
    };
  },
  computed: {
    anchor_point_list: function(){
      return this.formData.tempData.modules.filter(i => i.is_anchor_point).map(item => {
        return {
          id: getUuid(),
          connect_id: item.module_id,
          connect_name: item.anchor_point_name,
          title: "",
          pic_normal: "",
          pic_checked: ""
        }
      })
    }
  },
  mounted() {
    this.$refs['scroll-container'].addEventListener('scroll', () => {
      this.jusityPlace()
    }, false)
    let newh5ActivityDetail=JSON.parse(sessionStorage.getItem("newH5ActivityDetail"))
    if(newh5ActivityDetail&&this.$route.name==='activityListEdit'){
      console.log(newh5ActivityDetail)
      this.promotionId = newh5ActivityDetail.id
      this.formData.name = newh5ActivityDetail.title,
      this.formData.timeRange.push(newh5ActivityDetail.endTime)
      this.formData.timeRange.push(newh5ActivityDetail.startTime)
      
      let tempData = {
        isHide: false,
        background: "#f1f1f1",
        background_image: "",
        share_icon: "",
        description: "",
        modules: [],
        footer_tabs: { content_list: [] }
      }
      try {
          tempData = JSON.parse(newh5ActivityDetail.template)
          this.currentModule = tempData.modules && tempData.modules.length ? 0 : -1;
          tempData.isHide = tempData.isHide || false
          tempData.footer_tabs = tempData.footer_tabs
            ? tempData.footer_tabs
            : { content_list: [] }

          tempData.modules.filter(i => i.module_type === 2).map(item => {
            if (!item.show_num) {
              item.show_num = item.content_list.length
            }
          })
        } catch (e) {
          tempData = {
            isHide: false,
            background: "#f1f1f1",
            background_image: "",
            share_icon: "",
            description: "",
            modules: [],
            footer_tabs: { content_list: [] }
          }
        }
        this.formData = {
          type: 1,
          jumpType: 1,
          banner: "",
          remarks: "",
          name: newh5ActivityDetail.title,
          startTime: newh5ActivityDetail.startTime,
          stopTime: newh5ActivityDetail.endTime,
          status: newh5ActivityDetail.enable===true?1:0,
          description: "",
          comment: "",
          timeRange: [newh5ActivityDetail.startTime, newh5ActivityDetail.endTime],
          tempData: tempData
        }
        console.log(this.formData)
    }else{
      let detailData = sessionStorage.getItem("h5ActivityDetail");
      if (detailData) {
        let detail = JSON.parse(detailData);
        let tempData = {
          isHide: false,
          background: "#f1f1f1",
          background_image: "",
          share_icon: "",
          description: "",
          modules: [],
          footer_tabs: { content_list: [] }
        };
        try {
          tempData = JSON.parse(detail.comment);
          this.currentModule = tempData.modules && tempData.modules.length ? 0 : -1;
          tempData.isHide = tempData.isHide || false;
          tempData.footer_tabs = tempData.footer_tabs
            ? tempData.footer_tabs
            : { content_list: [] };

          tempData.modules.filter(i => i.module_type === 2).map(item => {
            if (!item.show_num) {
              item.show_num = item.content_list.length
            }
          })
        } catch (e) {
          tempData.modules = [
            {
              module_type: 7,
              comment: detail.comment
            }
          ];
        }

        this.formData = {
          ...detail,
          timeRange: [detail.startTime, detail.stopTime],
          tempData
        };
      } else {
        document.getElementById("h5Header").click();
      }
    }
  },
  methods: {
    addModule(module_type) {
      let module_id = "module_" + getUuid();
      let new_module = {};
      switch (module_type) {
        case -1:
          new_module = {
            module_id,
            module_type,
            content_list: []
          };
          break;
        case 1:
          new_module = {
            module_id,
            module_type,
            is_anchor_point: false,
            anchor_point_name: "",
            content_list: [
              {
                pic: "",
                type: 0,
                type_val: "",
                from_type: 0,
                pack_type: 0,
                title: "",
                subtitle: ""
              },
              {
                pic: "",
                type: 0,
                type_val: "",
                from_type: 0,
                pack_type: 0,
                title: "",
                subtitle: ""
              }
            ]
          };
          break;
        case 2:
          new_module = {
            module_id,
            module_type,
            is_anchor_point: false,
            anchor_point_name: "",
            show_num: 1,
            content_list: [
              {
                pic: "",
                type: 0,
                type_val: "",
                from_type: 0,
                pack_type: 0,
                title: "",
                subtitle: "",
                video_width: ""
              }
            ]
          };
          break;
        case 3:
          new_module = {
            module_id,
            module_type,
            is_anchor_point: false,
            anchor_point_name: "",
            show_num: 2,
            content_list: [
              {
                pic: "",
                type: 0,
                type_val: "",
                from_type: 0,
                pack_type: 0,
                title: "",
                subtitle: ""
              },
              {
                pic: "",
                type: 0,
                type_val: "",
                from_type: 0,
                pack_type: 0,
                title: "",
                subtitle: ""
              },
              {
                pic: "",
                type: 0,
                type_val: "",
                from_type: 0,
                pack_type: 0,
                title: "",
                subtitle: ""
              }
            ]
          };
          break;
        case 4:
          new_module = {
            module_id,
            module_type,
            module_background_image: "",
            is_anchor_point: false,
            anchor_point_name: "",
            content_list: []
          };
          break;
        case 5:
          new_module = {
            module_id,
            module_type,
            module_background_image: "",
            is_anchor_point: false,
            anchor_point_name: "",
            show_num: 1,
            content_list: []
          };
          break;
        case 6:
          new_module = {
            module_id,
            module_type,
            module_background_image: "",
            is_anchor_point: false,
            anchor_point_name: "",
            show_num: 2,
            content_list: []
          };
          break;
        default:
          new_module = {
            module_id,
            module_type,
            module_background_image: "",
            is_anchor_point: false,
            anchor_point_name: "",
            comment: ""
          };
          break;
      }

      if(module_type === -1){
        if (this.formData.tempData.modules.some(i => i.module_type === -1)){
          this.$message.warning("锚点导航已存在");
          return;
        }
        new_module.content_list = this.formData.tempData.modules.filter(i => i.is_anchor_point).map(item => {
          return {
            id: getUuid(),
            connect_id: item.module_id,
            connect_name: item.anchor_point_name,
            title: "",
            pic_normal: "",
            pic_checked: ""
          }
        })
      }
      this.formData.tempData.modules.splice(
        this.currentModule + 1,
        0,
        new_module
      );
      this.currentModule++;
      if(this.formData.tempData.modules.length>1){
        setTimeout(() => {
          let $el = document.getElementById("scroll-container");
          $el.scrollTop =
            $el.scrollTop + [0, 175, 315, 215, 115, 390, 305, 70][this.formData.tempData.modules[this.currentModule-1].module_type];
        }, 100);
      }
      
    },
    addFooterBar() {
      if (
        this.formData.tempData.footer_tabs.content_list &&
        this.formData.tempData.footer_tabs.content_list.length
      ) {
        this.$message.warning("底部导航已存在");
      } else {
        this.formData.tempData.footer_tabs.content_list = [
          {
            pic: "",
            type: 0,
            type_val: "",
            from_type: 0,
            pack_type: 0,
            title: "",
            subtitle: ""
          },
          {
            pic: "",
            type: 0,
            type_val: "",
            from_type: 0,
            pack_type: 0,
            title: "",
            subtitle: ""
          }
        ];
      }
    },
    removeModule(index) {
      this.$confirm("删除模块后，模块的配置不可恢复, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.formData.tempData.modules.splice(index, 1);
          this.updateAnchorPoint()
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    removeFooterBar() {
      this.$confirm("删除模块后，模块的配置不可恢复, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.formData.tempData.footer_tabs.content_list = [];
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    moduleClick(index) {
      if (index !== "footer") {
        this.currentModule = index;
      }

      this.formData.tempData.modules.map((item, i) => {
        if (i !== index && this.$refs[`richText${i}`]) {
          this.$refs[`richText${i}`][0].hideModule();
        }
      });

      setTimeout(this.jusityPlace, 300)
    },
    updateAnchorPoint() {
      let new_content_list = []
      let index = this.formData.tempData.modules.findIndex(i => i.module_type === -1)
      if (index > -1) {
        let module = this.formData.tempData.modules[index]
        this.formData.tempData.modules.filter(i => i.is_anchor_point).map(item => {
          let anchorPoint = module.content_list.find(x => x.connect_id === item.module_id)
          if (anchorPoint) {
            new_content_list.push({
              id: anchorPoint.id,
              connect_id: item.module_id,
              connect_name: item.anchor_point_name,
              title: anchorPoint.title,
              pic_normal: anchorPoint.pic_normal,
              pic_checked: anchorPoint.pic_checked,
            })
          } else {
            new_content_list.push({
              id: getUuid(),
              connect_id: item.module_id,
              connect_name: item.anchor_point_name,
              title: "",
              pic_normal: "",
              pic_checked: ""
            })
          }
        })

        this.formData.tempData.modules[index].content_list = new_content_list
      }
    },
    jusityPlace(){
      let $el = document.getElementsByClassName('el-popover')
      for(let i=0; i<$el.length; i++){
        if($el[i].style.top){
          let top = parseInt($el[i].style.top.replace('px', ''))
          let height = $el[i].clientHeight
          let screenHeight = document.body.clientHeight

          console.log(screenHeight, height)
          if (top < 5){
            $el[i].className = 'el-popover el-popper top-popper'
          } else if(top > screenHeight - height) {
            $el[i].className = 'el-popover el-popper bottom-popper'
          } else {
            $el[i].className = 'el-popover el-popper'
          }
        }
      }
    },
    save() {
      this.$refs.headerForm.validate(valid => {
        if (!valid) {
          let $el = document.getElementById("h5Header");
          let $popover = document.getElementById(
            $el.getAttribute("aria-describedby")
          );
          if ($popover && $popover.style.display === "none") {
            document.getElementById("h5Header").click();
          }
          return false;
        }

        this.btnLoading = true;
        if(this.promotionId){
          this.formData.startTime =this.formData.timeRange[0]       
          this.formData.stopTime = this.formData.timeRange[1]
          this.formData.comment = JSON.stringify(this.formData.tempData);
          this.request({
            url:'/promotion/'+this.promotionId,
            method: "put",
            data: {
              enable:this.formData.status==1?true:false,
              endTime:this.formData.stopTime,
              startTime:this.formData.startTime,
              title:this.formData.name,
              type:1,
              template:this.formData.comment,
              showTitle:this.formData.tempData.isHide
            }
          })
          .then((res) => {
            if(res.data===true){
              this.btnLoading = false;
              this.$message.success("保存成功")
              this.$router.push({ name: "activityList" })
            }else{
              this.btnLoading = false
              this.$message.success("保存失败")
            }    
          })
          .catch(err => {
            this.btnLoading = false;
          });
        }else{
          let url = this.formData.id
            ? "/bsnl-activity/activity/update"
            : "/bsnl-activity/activity/create";
          this.formData.startTime = this.formData.timeRange[0];
          this.formData.stopTime = this.formData.timeRange[1];
          this.formData.comment = JSON.stringify(this.formData.tempData);
          this.request({
            url,
            method: "post",
            data: this.formData
          })
            .then(() => {
              this.btnLoading = false;
              this.$message.success("保存成功");
              this.$router.push({ name: "activityH5" });
            })
            .catch(err => {
              this.btnLoading = false;
            });
        }
          
      });
    },
    cancle() {
      if(this.promotionId){
        this.$router.push({ name: 'activityList' })
      }else{
        this.$router.push({ name: 'activityH5' })
      }
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/mixin";
.top-popper{
  top: 5px !important;
}
.bottom-popper{
  top: inherit !important;
  bottom: 6px !important;
}
.flex-container {
  @include flex;

  .module-container {
    width: 150px;
    min-height: 300px;

    .title {
      color: #666;
      font-size: 14px;
      padding-top: 20px;
      padding-bottom: 6px;
      border-bottom: 1px dotted #e1e1e1;
    }

    .module-template {
      padding: 4px;
      border: 1px solid #e6e6e6;
      margin-top: 12px;
      margin-right: 8px;
      cursor: pointer;
      .content {
        width: 100%;
        height: 32px;
      }
      .text {
        color: #999;
        font-size: 12px;
        text-align: center;
        padding-top: 4px;
      }

      &.module-carousel {
        .content {
          color: #008aff;
          text-align: center;
          line-height: 28px;
          background: #b2deff;
        }
      }
      &.module-pic-fix {
        .content {
          @include flex;
          .item {
            @include sub-item;
            height: 28px;
            margin-right: 2px;
            background: #b2deff;

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
      &.module-pic-scroll {
        .content {
          @include flex;
          .item {
            @include sub-item(2);
            height: 28px;
            margin-right: 2px;
            background: #b2deff;

            &:last-child {
              @include sub-item;
              margin-right: 0;
            }
          }
        }
      }
      &.module-goods-list-detail {
        .content {
          @include flex;
          padding: 4px;
          border: 1px solid #eee;
          background: #fff;

          .img {
            width: 24px;
            background: #b2deff;
          }
          .detail {
            @include sub-item;
            @include flex(column);
            justify-content: space-between;
            font-size: 10px;
            padding-left: 4px;
            .name {
              @include text-ellipsis;
              color: #999;
            }
            .price {
              color: #c03639;
            }
          }
        }
      }
      &.module-goods-list-pic {
        .content {
          @include flex;
          .item {
            @include sub-item;
            height: 28px;
            margin-right: 2px;
            background: #b2deff;

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
      &.module-goods-list-pic-scroll {
        .content {
          @include flex;
          .item {
            @include sub-item(2);
            height: 28px;
            margin-right: 2px;
            background: #b2deff;

            &:last-child {
              @include sub-item;
              margin-right: 0;
            }
          }
        }
      }
      &.module-footer-bar {
        .content {
          @include flex;
          height: 28px;
          .item {
            @include sub-item;
            height: 24px;
            margin-right: 2px;
            background: #b2deff;

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
      &.module-rich-text {
        .content {
          border: 1px solid #eee;
          img {
            width: 100%;
          }
        }
      }
    }
  }

  .page-container {
    @include sub-item;
    margin-left: 36px;
    border-left: 1px solid #eee;

    .phone {
      @include flex(column);
      position: relative;
      width: 320px;
      height: 620px;
      margin-left: 36px;
      background: transparent url(../../../assets/common/bg_mobile_head.jpg) no-repeat 0 0;
      box-shadow: 0 2px 8px #afafaf;
      border: 1px solid #e7e7eb;

      header {
        color: #fff;
        font-size: 14px;
        height: 64px;
        text-align: center;
        padding: 35px 0 15px;
        box-sizing: border-box;
        cursor: pointer;
      }
      section {
        @include sub-item(1, column);
        @include scrollbar(2);
        background-size: cover !important;
        position: relative;
      }
    }
    .phone-footer {
      color: red;
      font-size: 14px;
      padding-left: 110px;
      padding-top: 12px;
    }
  }

  .module {
    cursor: pointer;
    background-size: cover !important;
    position: relative;
    .anchor-point{
       color: #fff;
        font-size: 12px;
        padding: 0 4px;
        line-height: 30px;
        background: rgba(0, 0, 0, 0.6);
        top: 0;
        left: 0;
        position: absolute;
        z-index: 9;
    }
    .module-type{
      color: #fff;
      font-size: 12px;
      padding: 0 4px;
      line-height: 30px;
      background: rgba(0, 0, 0, 0.36);
      top: 0;
      left: 0;
      position: absolute;
      z-index: 9;
    }
    .remove-btn {
      display: none;
    }

    &.fix-module {
      box-shadow: 0 -2px 2px #ccc;
    }

    &:hover {
      border: 1px solid rgba(0, 0, 0, 0.1);
      .remove-btn {
        @include flex;
        @include center;
        color: #fff;
        font-size: 18px;
        width: 30px;
        height: 30px;
        background: rgba(0, 0, 0, 0.6);
        top: 0;
        right: 0;
        position: absolute;
        z-index: 9;
      }
    }
    &.active {
      border: 1px solid #ff5a5a;
    }
  }
}
.h5-btn-container {
  padding: 36px 160px 0;
}
</style>
